<template>
  <div>

    <!-- <van-divider content-position="left"></van-divider> -->
    <div class="L-filter-container">

      <!-- 顶部 -->
      <van-row type="flex" align="center" class="L-filter-top-row">
        <van-col :span="3">
          <i class="iconfont icon-fanhui2" style="font-size:22px" @click="handleBack"></i>
        </van-col>
        <van-col :span="18" class="L-text">
          筛选
        </van-col>
        <van-col :span="3">
          &nbsp;
        </van-col>
      </van-row>

      <!-- 字段 -->
      <div v-for="(item,index) in filterObj.fieldArr" :key="index" class="L-fliter-field-box">
        <div class="L-text L-bold-text L-margin-10">{{item.viewcondition_title}}</div>
        <div>
          <FilterInput :uitype="item.viewcondition_uitype" :formItem="item" @handleUpdate="handleUpdate" />
        </div>
      </div>

      <!-- 排序 -->
      <div class="L-fliter-field-box">
        <div>
          <van-radio-group v-model="filterObj.sortType" direction="horizontal">
            <van-row style="width:100%">
              <van-col :span="8">
                <div class="L-text L-bold-text L-margin-10">排序</div>
              </van-col>
              <van-col class="L-sort-type-item" :span="8" v-for="(item,index) in sortArr" :key="index">
                <van-radio :name="item.value">{{item.title}}</van-radio>
              </van-col>
            </van-row>
          </van-radio-group>
        </div>
        <div class="L-margin-top-20">
          <span v-for="(item,index) in filterObj.fieldArr" :key="index" class="L-checked-btn" :class="item.viewcondition_field===filterObj.sortBy ? 'L-checked-btn-on' :'' " @click="handleClickSortField(item)">{{item.viewcondition_title}}</span>
        </div>
      </div>

      <!-- 标签 -->
      <div class="L-fliter-field-box" v-if="filterObj.tags.length>0">
        <div class="L-text L-bold-text L-margin-10">标签</div>
        <div class="L-margin-top-20">
          <span v-for="(item,index) in filterObj.tags" :key="index" class="L-checked-btn" :class="filterObj.selectedTags.indexOf(item.id)===-1 ? '' :'L-checked-btn-on' " @click="handleClickTags(item.id)">{{item.sname}}</span>
        </div>

      </div>

      <!-- 底部按钮 -->
      <van-row type="flex" align="center" class="L-filter-bottom-row">
        <van-col :span="12">
          <van-button color="#CDD0D6" style="width:80%" @click="handleClear">清空</van-button>
        </van-col>
        <van-col :span="12">
          <van-button color="#1683f7" style="width:80%" @click="handleSearch">查询</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter,useRoute} from "vue-router"
// const router  =  useRouter()
const route = useRoute()
import { ref, defineProps, reactive, defineEmits, onMounted,onActivated,watch } from "vue";
import FilterInput from "../base/Filter/FilterInput.vue";
import { closeToast, showLoadingToast } from "vant";
import emitter from "@/utils/emitter";
import {apiConfigurable} from "@/request/api/api"


const logicObj = {
  number: [
    { title: "等于", value: "eq" },
    { title: "不等于", value: "noteq" },
    { title: "大于", value: "bt" },
    { title: "大于等于", value: "bteq" },
    { title: "小于", value: "lt" },
    { title: "小于等于", value: "lteq" },
    { title: "空", value: "empty" },
    { title: "非空", value: "notempty" },
  ],
  bool: [
    { title: "等于", value: "eq" },
    { title: "不等于", value: "noteq" },
    { title: "空", value: "empty" },
    { title: "非空", value: "notempty" },
  ],
  dateTime: [
    { title: "等于", value: "eq" },
    { title: "大于", value: "bt" },
    { title: "大于等于", value: "bteq" },
    { title: "小于", value: "lt" },
    { title: "小于等于", value: "lteq" },
    { title: "区间", value: "between" },
  ],
  default: [
    { title: "包含", value: "in" },
    { title: "不包含", value: "notin" },
    { title: "等于", value: "eq" },
    { title: "不等于", value: "noteq" },
    { title: "空", value: "empty" },
    { title: "非空", value: "notempty" },
  ],
};

const emits = defineEmits(["back","handleClickFilterFind"]);

const sortArr = [
  { title: "升序", value: "asc" },
  { title: "降序", value: "desc" },
];

const props = defineProps({
  object:{
    type:String,
    default:""
  },
  
});

const filterObj = reactive({
  fieldArr: [],
  tags: [],
  sortType: "asc",
  sortBy: "",
  selectedTags: [],
});

interface fieldLogicItem {
  title: string;
  value: string;
}

function getFieldLogic(uiType: string): Array<fieldLogicItem> {
  if (["double", "money", "int"].indexOf(uiType) !== -1) {
    return logicObj.number;
  }

  if (["yearmonth", "datetime"].indexOf(uiType) !== -1) {
    return logicObj.dateTime;
  }

  if (["boolean", "bool"].indexOf(uiType) !== -1) {
    return logicObj.bool;
  }

  return logicObj.default;
}

function handleClickTags(id: string) {
  if (filterObj.selectedTags.indexOf(id) === -1) {
    filterObj.selectedTags.push(id);
  } else {
    filterObj.selectedTags.splice(filterObj.selectedTags.indexOf(id), 1);
  }
}

function handleClickSortField(item) {
  filterObj.sortBy = item.viewcondition_field;
}

watch(()=>route.query.idobject,(value)=>{
  if(value){
    handleClear()
    getData()
  }
})

onMounted(() => {
  getData();
});

function getData() {
  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });
  const filterapi = `${props.object}.query.do`;
  
  apiConfigurable(filterapi,{}).then((res) => {
    if(res.code===0){
      filterObj.fieldArr = [...res.data.jsondata];
      filterObj.tags = [...res.data.tags];
      closeToast()
    }
    
  });
}

function handleUpdate(item,value:string){
  item.viewcondition_value = value
}

function handleBack() {
  emits("back", false);
}

function handleClear(){
  filterObj.selectedTags = []
  filterObj.sortBy = ""
  filterObj.sortType = "asc"
  filterObj.fieldArr = filterObj.fieldArr.map(item=>{
    item.viewcondition_value = ""
    return item
  })
  emitter.emit('clearFilterInputData')

}


function handleSearch(){
  emits("handleClickFilterFind",filterObj)
}
</script>

<style scoped>

</style>